<template>
  <div class="eco-gantt-chart">
    <el-card shadow="hover" class="gantt-card">
      <div class="gantt-title">修复计划甘特图（模拟）</div>
      <div ref="ganttRef" class="gantt-chart"></div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 模拟修复区域计划任务数据
const tasks = [
  { region: 'A区', task: '前期准备', start: '2024-01-05', end: '2024-02-15', progress: 100, color: '#409EFF' },
  { region: 'A区', task: '修复施工', start: '2024-02-16', end: '2024-04-30', progress: 100, color: '#67C23A' },
  { region: 'A区', task: '成效评估', start: '2024-05-01', end: '2024-06-01', progress: 100, color: '#E6A23C' },
  { region: 'B区', task: '前期准备', start: '2024-01-12', end: '2024-03-01', progress: 100, color: '#409EFF' },
  { region: 'B区', task: '修复施工', start: '2024-03-02', end: '2024-06-01', progress: 76, color: '#67C23A' },
  { region: 'B区', task: '成效评估', start: '2024-06-02', end: '2024-07-01', progress: 0, color: '#E6A23C' },
  { region: 'C区', task: '前期准备', start: '2024-02-01', end: '2024-03-10', progress: 100, color: '#409EFF' },
  { region: 'C区', task: '修复施工', start: '2024-03-11', end: '2024-08-01', progress: 52, color: '#67C23A' },
  { region: 'C区', task: '成效评估', start: '2024-08-02', end: '2024-09-01', progress: 0, color: '#E6A23C' },
  { region: 'D区', task: '前期准备', start: '2024-02-20', end: '2024-03-25', progress: 100, color: '#409EFF' },
  { region: 'D区', task: '修复施工', start: '2024-03-26', end: '2024-07-20', progress: 36, color: '#67C23A' },
  { region: 'D区', task: '成效评估', start: '2024-07-21', end: '2024-08-20', progress: 0, color: '#E6A23C' }
]

// 转换为ECharts需要的bar数据
function parseDate(str: string) {
  return new Date(str.replace(/-/g, '/')).getTime()
}
// 按 region、task 排序
const regions = Array.from(new Set(tasks.map(t => t.region)))
const taskTypes = ['前期准备', '修复施工', '成效评估']

const bars = tasks.map((t, i) => ({
  name: `${t.region} - ${t.task}`,
  value: [t.region, parseDate(t.start), parseDate(t.end), t.task, t.progress],
  itemStyle: { color: t.color }
}))

const ganttRef = ref<HTMLDivElement>()
onMounted(() => {
  if (ganttRef.value) {
    const chart = echarts.init(ganttRef.value)
    chart.setOption({
      tooltip: {
        formatter: (params: any) => {
          const d1 = new Date(params.value[1])
          const d2 = new Date(params.value[2])
          return `<b>${params.value[0]} ${params.value[3]}</b><br>
            起：${d1.getFullYear()}-${d1.getMonth()+1}-${d1.getDate()}<br>
            止：${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}<br>
            完成率：${params.value[4]}%`
        }
      },
      grid: { left: 100, right: 40, top: 40, bottom: 40 },
      xAxis: {
        min: parseDate('2024-01-01'),
        max: parseDate('2024-09-01'),
        type: 'time',
        axisLabel: { color: '#555', fontSize: 13 }
      },
      yAxis: {
        type: 'category',
        data: regions,
        axisLabel: { color: '#222', fontWeight: 'bold', fontSize: 15 }
      },
      series: [
        {
          type: 'bar',
          data: bars.map(b => ({
            name: b.name,
            value: b.value,
            itemStyle: b.itemStyle,
            // 柱形长度=时间跨度
            barWidth: 22,
            label: {
              show: true,
              position: 'right',
              formatter: (params: any) => params.value[3] + `（${params.value[4]}%）`
            }
          })),
          barGap: 0,
          // 自定义每一项的起止（用coords）
          encode: {
            x: [1, 2],
            y: 0,
            tooltip: [0, 3, 4]
          }
        }
      ]
    })
    window.addEventListener('resize', () => chart.resize())
  }
})
</script>

<style scoped>
.eco-gantt-chart {
  width: 100vw;
  min-height: 100vh;
  padding: 32px 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.gantt-card {
  width: 100%;
  min-height: 650px;
}
.gantt-title {
  font-size: 18px;
  font-weight: bold;
  color: #308d2d;
  margin-bottom: 18px;
}
.gantt-chart {
  width: 100%;
  min-height: 520px;
  height: 65vh;
}
</style>
